nav {
  position: relative;
  width: 100%;
  z-index: z('optionsNav');
  background-color: #edf7ff;
  ul {
    position: relative;
    z-index: +2;
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
    li {
      button {
        background: transparent;
        border: 0;
        padding: 15px 20px;
        transition: all .2s;
        .icon {
          transition: transform .2s;
        }
        &.close {
          position: absolute;
          top: 0;
          right: 0;
          opacity: .5;
          color: white;
          background: rgb(69, 127, 185);
        }
        &:hover {
          cursor: pointer;
          .icon {
            transform: scale(1.6);
          }
          &.close {
            opacity: 1;
            transform: none;
          }
        }
        &.active {
          color: $blue;
          cursor: default;
          .icon {
            transform: scale(1.6);
          }
        }
        &:focus {
          outline: 0;
          color: darken($blue, 10%);
          &.close {
            color: black;
            opacity: .65;
          }
        }
      }
    }
  }
  svg.navBg {
    position: absolute;
    top: 0;
    right: 0;
    z-index: +1;
    width: 100%;
    height: calc(100% + 25px);
    overflow: hidden;
    polyline {
      fill: rgba(240, 240, 240, 1);
    }
  }
}
